<template>
  <div class="answer-success"> 
     <heads title="报名详情"></heads>
      <div class="main-content">
        <div class="title grey">{{ list.title }}</div>
        <img src="@/assets/right.png" alt="" class="success-icon">
        <h1 class="">报名成功!</h1>
        <p class="grey">{{ `已报名${list.user_times}人` }}</p>
        <div class="person-box flex">
          <p class="grey" :class="muti ? 'mutiO' : 'mutiT'">
            {{ list.user_name }}
           </p>
          <div class="more" @click="MutiToggle">{{ muti ? '更多' : '收起' }}</div>
        </div>
      <div class="btn-box">
        <router-link :to="{path:'/index'}">
        <van-button type="info" class="btn-common">回首页
          </van-button>
        </router-link>
      </div>
      </div>
 
  </div>


</template>

<script>
import Mock from "mockjs";
export default {
  components: {
      heads: resolve => require(["@/components/common/heads"], resolve),
  },
  data() {
    return {
      muti:true
     
    };
  },
  beforeRouteUpdate(to, from, next) {
    this.$store.state.crumb.push(to);
    this.$store.state.crumb.push(from);
    next();
  },
  methods: {
    MutiToggle(){
      let _this = this;
      _this.muti = !_this.muti
    }
  
  },
  created() {
    let _this = this;
    _this.list = _this.$store.state.EnrollInfo;
  
    console.log('报名详情',_this.list)
   
   
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.answer-success{
 box-sizing: border-box;
  min-height: 100vh;
  .main-content{
     padding: 0 .6rem;
       min-height: 92vh;
       .title{
         font-size: .32rem;
         padding: .88rem 0;
       }
       .success-icon{
         width: 1.8rem;
         margin: .3rem 0;
       }
       p{
         font-size: .26rem;            
       }
       .person-box{
         padding: 1.6rem 0;
        justify-content: center;
         p{
           &.mutiO{
              overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 86%;
           }
           &.mutiT{
             max-width: 86%;
    word-break: break-all;
    text-align: left;
           }
         }
       }
       .more{
          font-size: .26rem;
          color: #2D6FD8;
          margin-left: .3rem;
       }
  }
  .logo{
    width: 2.52rem;
    margin: 1rem auto;
  }
  .van-cell{  }
  .btn-box{
    box-sizing: border-box;
    
  }

}

</style>
